<template>
    <div>
        <el-page-header @back="goBack" :content="title"></el-page-header>
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px" style="margin-top:20px">
            <el-form-item label="机构名称:" prop="title">
                <el-input v-model="form.title" size="medium" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="管理范围:" prop="permission_range">
              <el-row>
                <el-select v-model="ranknums" @change="rankFn" style="width:200px" placeholder="请选择" size="medium">
                  <el-option label='全国' :value="1"></el-option>
                  <el-option label='省级' :value="2"></el-option>
                  <el-option label='市级' :value="3"></el-option>
                  <el-option label='区县' :value="4"></el-option>
                  <el-option label='学校' :value="5"></el-option>
                </el-select>
              </el-row>
              <el-row style="margin-top:15px">
                <el-col :span="6" v-show="provincialStatus === 1">
                  <el-select v-model="provincial"  placeholder="请选择" @change="provincialFn" size="medium">
                    <el-option
                      v-for="item in treeData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6" v-show="cityStatus === 1">
                  <el-select v-model="city"  placeholder="请选择" @change="cityFn" size="medium">
                    <el-option
                      v-for="item in cityData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6" v-show="areaStatus === 1">
                  <el-select v-model="area"  placeholder="请选择" @change="areaFn" size="medium">
                    <el-option
                      v-for="item in areaData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6" v-show="schoolStatus === 1">
                  <!-- <el-select v-model="school_id"  placeholder="请选择">
                    <el-option
                      v-for="item in schoolData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select> -->
                  <el-select v-model="school_id" multiple placeholder="请选择">
                    <el-option
                      v-for="item in schoolData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      clearable>
                    </el-option>
                  </el-select>
                  <!-- <el-cascader
                    v-model='school_id'
                    :options="schoolData"
                    :props="{ multiple: true, checkStrictly: true }"
                    size="medium"
                    clearable>
                  </el-cascader> -->
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="机构地址:" prop="address">
                <el-input v-model="form.address" size="medium" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="机构账号:" prop="account_number">
              <el-input v-model="form.account_number" placeholder="机构超级管理员账号" size="medium" style="width:300px" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名:" prop="full_name">
              <el-input v-model="form.full_name" placeholder="联系人" size="medium" style="width:300px"></el-input>
            </el-form-item>
             <el-form-item label="联系人电话:" prop="phone">
                <el-input v-model="form.phone" placeholder="联系电话" size="medium" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱:" prop="email">
              <el-input v-model="form.email" placeholder="联系邮箱" size="medium" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-select v-model="form.status" style="width:200px" placeholder="请选择" size="medium">
                <el-option label='启用' :value='1'></el-option>
                <el-option label='禁用' :value='0'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('ruleForm')" size="medium">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { getAddGroupAccount, getLocalSchools, updateGroupAccount } from '@/common/api.js'
export default {
  data () {
    return {
      title: '添加账号',
      mechanism_id: '',
      isDisabled: false,
      form: {
        title: '',
        address: '',
        account_number: '',
        phone: '',
        email: '',
        full_name: '',
        is_all: 0,
        permission_range: '',
        status: 1
      },
      treeData: [],
      ranknums: '', // 级别
      provincial: '', // 省级
      provincialStatus: 0,
      city: '', // 市级
      cityStatus: 0, // 0是隐藏 1是显示
      cityData: [], // 市级数据
      area: '', // 区级
      areaStatus: 0,
      areaData: [], // 区级数据
      school_id: [],
      schoolStatus: 0,
      schoolData: [],
      selectSchoolData: [],
      rules: {
        title: [
          { required: true, message: '请输入机构名称', trigger: 'blur' }
        ],
        // permission_range: [
        //   { required: true, message: '请输入机构范围', trigger: 'blur' }
        // ],
        account_number: [
          { required: true, message: '请输入机构账号', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    let { data, title } = this.$route.params
    if (title && data) {
      this.title = title
      this.mechanism_id = data.id
      this.isDisabled = true
      this.form.title = data.title
      this.form.address = data.address
      this.form.account_number = data.account_number
      this.form.phone = data.phone
      this.form.email = data.email
      this.form.full_name = data.full_name
      this.form.is_all = data.is_all
      this.form.status = data.status
    }
    getLocalSchools({ parent_id: 1 }).then(res => {
      this.treeData = res.data.data
      this.ranknums = 1
      if (title && data) {
        this.ranknums = data.is_all
        this.$nextTick(() => {
          this.checkrankData(data.range)
        })
      }
      this.rankFn(this.ranknums)
    })
  },
  methods: {
    goBack () {
      this.$router.push('/users_management')
    },
    checkrankData (range) {
      if (this.ranknums === 2) {
        this.provincial = range.province
      }
      if (this.ranknums === 3) {
        this.provincial = range.province
        this.provincialFn()
        this.city = range.city
      }
      if (this.ranknums === 4) {
        this.provincial = range.province
        this.provincialFn()
        this.city = range.city
        this.cityFn()
        this.area = range.area
      }
      if (this.ranknums === 5) {
        this.provincial = range.province
        this.provincialFn()
        this.city = range.city
        this.cityFn()
        this.area = range.area
        this.areaFn()
        this.school_id = range.school_list
      }
      this.form.permission_range = {
        province: this.provincial,
        city: this.city,
        area: this.area,
        school_id: range.school_list.join(',')
      }
    },
    rankFn (val) {
      this.provincial = ''
      this.city = ''
      this.area = ''
      this.school_id = []
      if (val === 1) {
        this.provincialStatus = 0
        this.cityStatus = 0
        this.areaStatus = 0
        this.schoolStatus = 0
      } else if (val === 2) {
        this.provincialStatus = 1
        this.cityStatus = 0
        this.areaStatus = 0
        this.schoolStatus = 0
      } else if (val === 3) {
        this.provincialStatus = 1
        this.cityStatus = 1
        this.areaStatus = 0
        this.schoolStatus = 0
      } else if (val === 4) {
        this.provincialStatus = 1
        this.cityStatus = 1
        this.areaStatus = 1
        this.schoolStatus = 0
      } else if (val === 5) {
        this.provincialStatus = 1
        this.cityStatus = 1
        this.areaStatus = 1
        this.schoolStatus = 1
      }
    },
    provincialFn () {
      if (this.ranknums > 2) {
        this.city = ''
        this.area = ''
        this.school_id = []
        this.cityData = []
        this.areaData = []
        this.schoolData = []
        this.treeData.forEach(item => {
          if (item.id === this.provincial) {
            if (item.children) {
              this.cityData = item.children
            } else {
              this.cityData = []
            }
          }
        })
      }
    },
    cityFn () {
      if (this.ranknums > 3) {
        this.area = ''
        this.school_id = []
        this.areaData = []
        this.schoolData = []
        this.cityData.forEach(item => {
          if (item.id === this.city) {
            if (item.children) {
              this.areaData = item.children
            } else {
              this.areaData = []
            }
          }
        })
      }
    },
    areaFn () {
      if (this.ranknums > 4) {
        this.school_id = []
        this.schoolData = []
        this.areaData.forEach(item => {
          if (item.id === this.area) {
            if (item.children && item.children.length !== 0) {
              this.schoolData = item.children
              this.schoolData.forEach(elements => {
                elements.value = elements.id
                elements.label = elements.name
              })
            } else {
              this.schoolData = []
            }
          }
        })
      }
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ranknums === 2) {
            if (this.provincial === '') {
              this.$message({
                message: '省级不可为空',
                type: 'warning'
              })
              return
            }
          } else if (this.ranknums === 3) {
            if (this.provincial === '') {
              this.$message({
                message: '省级不可为空',
                type: 'warning'
              })
              return
            }
            if (this.city === '') {
              this.$message({
                message: '市级不可为空',
                type: 'warning'
              })
              return
            }
          } else if (this.ranknums === 4) {
            if (this.provincial === '') {
              this.$message({
                message: '省级不可为空',
                type: 'warning'
              })
              return
            }
            if (this.city === '') {
              this.$message({
                message: '市级不可为空',
                type: 'warning'
              })
              return
            }
            if (this.area === '') {
              this.$message({
                message: '区级不可为空',
                type: 'warning'
              })
              return
            }
          } else if (this.ranknums === 5) {
            if (this.provincial === '') {
              this.$message({
                message: '省级不可为空',
                type: 'warning'
              })
              return
            }
            if (this.city === '') {
              this.$message({
                message: '市级不可为空',
                type: 'warning'
              })
              return
            }
            if (this.area === '') {
              this.$message({
                message: '区级不可为空',
                type: 'warning'
              })
              return
            }
            if (!this.school_id.length) {
              this.$message({
                message: '学校不可为空',
                type: 'warning'
              })
              return
            }
          }
          this.form.is_all = this.ranknums
          // let aaarry = []
          // if (this.school_id !== '') {
          //   this.school_id.forEach(item => {
          //     aaarry.push(item[0])
          //   })
          // }
          // aaarry = aaarry.join(',')
          this.form.permission_range = {
            province: this.provincial,
            city: this.city,
            area: this.area,
            school_id: this.school_id.join(',')
            // school_id: aaarry
          }
          if (this.isDisabled) {
            // 编辑
            this.form.mechanism_id = this.mechanism_id
            updateGroupAccount(this.form).then(res => {
              if (res.data.status === 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                })
                this.$router.push('/users_management')
              } else {
                this.$message.error(res.data.msg)
              }
            }).catch(err => {
              this.$message.error(err.data.msg)
            })
          } else {
            // 添加
            getAddGroupAccount(this.form).then(res => {
              if (res.data.status === 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                })
                this.$router.push('/users_management')
              } else {
                this.$message.error(res.data.msg)
              }
            }).catch(err => {
              this.$message.error(err.data.msg)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
